<template>
    <div class="common-list comp-articles" v-loading.fullscreen="loading">
        <div class="common-list__head">
            <el-input class="filter" v-model="filters.title" size="small" style="width: 320px" clearable placeholder="请输入" :readonly="loading" @change="search(true)">
                <span slot="prepend">信息标题</span>
            </el-input>
            <el-input class="filter" v-model="filters.referer" size="small" style="width: 240px" clearable placeholder="请输入" :readonly="loading" @change="search(true)" v-if="type !== 'inspect'">
                <span slot="prepend">信息来源</span>
            </el-input>
            <el-input class="filter" v-model="filters.author" size="small" style="width: 240px" clearable placeholder="请输入" :readonly="loading" @change="search(true)" v-if="type !== 'inspect'">
                <span slot="prepend">信息作者</span>
            </el-input>
            <el-select class="filter" v-model="filters.tagId" size="small" style="width: 180px" @change="search(true)" v-if="!tagId">
                <el-option label="不限信息分类" :value="null"></el-option>
                <el-option v-for="data in tags" :key="data.id" :label="data.name" :value="data.id"></el-option>
            </el-select>
            <el-select class="filter" v-model="filters.published" size="small" style="width: 140px" @change="search(true)">
                <el-option label="不限信息状态" :value="null"></el-option>
                <el-option v-for="data in env.articlePublisheds" :key="data.id" :label="data.name" :value="data.value"></el-option>
            </el-select>
            <el-date-picker
              size="small"
              v-model="filters.publishTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="实际活动日期">
            </el-date-picker>
            <el-checkbox v-model="filters.isTop"
                         size="small"
                         :readonly="loading"
                         @change="search(true)"
                         border
                        true-label="1"
                        false-label="null">置顶</el-checkbox>
            <el-button class="filter" type="primary" size="small" @click="search()">查询</el-button>
            <el-button class="filter" type="plain" size="small" @click="reset(true)">重置</el-button>
        </div>
        <div class="common-list__nect">
            <slot name="head" :loading="loading" :filters="filters" :selects="selects"></slot>
        </div>
        <div class="common-list__body">
            <el-table ref="table" size="medium" height="100%" :data="list" @header-click="onTableHeaderClick" @row-click="onTableRowClick" @selection-change="onTableSelectionChange">
                <el-table-column type="selection" align="center" v-if="select"></el-table-column>
                <el-table-column label="信息标题" min-width="12">
                    <template #default="scope">
                        <template v-if="type === 'joblife'">
                            <a :href="'#/joblife/article?articleId=' + scope.row.id" v-if="link && access('joblife')">{{ scope.row.title }}</a>
                            <span v-else>{{ scope.row.title }}</span>
                        </template>
                        <template v-else-if="type === 'policy'">
                            <a :href="'#/policy/article?articleId=' + scope.row.id" v-if="link && access('policy')">{{ scope.row.title }}</a>
                            <span v-else>{{ scope.row.title }}</span>
                        </template>
                        <template v-else-if="type === 'news'">
                            <a :href="'#/news/article?articleId=' + scope.row.id" v-if="link && access('news')">{{ scope.row.title }}</a>
                            <span v-else>{{ scope.row.title }}</span>
                        </template>
                        <template v-else-if="type === 'inspect'">
                            <a :href="'#/inspect/article?articleId=' + scope.row.id" v-if="link && access('inspect')">{{ scope.row.title }}</a>
                            <span v-else>{{ scope.row.title }}</span>
                        </template>
                        <span v-else>{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="信息分类" min-width="4">
                    <template #default="scope">
                        <div v-for="tag in scope.row.tags" :key="tag.id">{{ tag.name }}</div>
                        <span v-if="scope.row.tags.length === 0">-</span>
                    </template>
                </el-table-column>
                <el-table-column label="信息来源" min-width="6" v-if="type !== 'inspect'">
                    <template #default="scope">{{ scope.row.referer || "-" }}</template>
                </el-table-column>
                <el-table-column label="信息作者" min-width="4" v-if="type !== 'inspect'">
                    <template #default="scope">{{ scope.row.author || "-" }}</template>
                </el-table-column>
                <el-table-column label="信息链接" min-width="6" v-if="type === 'inspect'">
                    <template #default="scope">
                        <a :href="scope.row.source" target="_blank" v-if="link && scope.row.source">{{ scope.row.source }}</a>
                        <span v-else>{{ scope.row.source }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="申报起止日期" min-width="8" v-if="type === 'policy'">
                    <template #default="scope">{{ scope.row.startAt + " ~ " + scope.row.endAt }}</template>
                </el-table-column>
                <el-table-column label="信息权重" min-width="4">
                    <template #default="scope">{{ scope.row.weight }}</template>
                </el-table-column>
                <el-table-column label="浏览次数" min-width="4">
                    <template #default="scope">{{ scope.row.views }}</template>
                </el-table-column>
                <el-table-column label="信息状态" min-width="4">
                    <template #default="scope">
                        <span class="el-status--success" v-if="scope.row.published === 'yes'"></span>
                        <span class="el-status--warning" v-else-if="scope.row.published === 'approving'"></span>
                        <span class="el-status--danger" v-else-if="scope.row.published === 'not'"></span>
                        <span>{{ scope.row.publishedText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" min-width="6">
                    <template #default="scope">{{ scope.row.publishTimeStr }}</template>
                </el-table-column>
                <el-table-column label="操作" :width="160" v-if="$slots.body || $scopedSlots.body">
                    <template #default="scope">
                        <slot name="body" :loading="loading" :filters="filters" :data="scope.row" :selects="selects"></slot>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="common-list__foot" :class="{ 'common-list__foot--slot': $slots.foot || $scopedSlots.foot }">
            <el-pagination background layout="total,sizes,prev,pager,next,jumper" :page-sizes="[10, 20, 50, 100]" :page-size="filters.linage" :current-page="filters.page" :total="filters.total" @size-change="onTableLinageChange" @current-change="onTablePageChange"></el-pagination>
            <slot name="foot" :loading="loading" :filters="filters" :selects="selects"></slot>
        </div>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { object, array, string, int, session } from "../util";
    export default {
        name: "comp-articles",
        mixins: [mixin],
        props: {
            type: { type: String, default: null },
            tagId: { type: String, default: null },
            select: { type: Boolean, default: false },
            link: { type: Boolean, default: false },
        },
        data: () => ({
            loading: false,
            filters: {
                ids: null,
                type: null,
                title: null,
                referer: null,
                author: null,
                tagId: null,
                published: null,
                linage: 10,
                page: 1,
                total: 0,
                startTime:null,
                isTop:null
            },
            list: [],
            selects: [],
            tags: [],
        }),
        methods: {
            reset(deep) {
                let data = deep ? {} : object(session([this.env.key, this.$options.name, "filters", this.$route.fullPath]));
                this.filters = Object.assign(this.$options.data().filters, data);
                if(this.$route.query?.startTime){
                    this.filters.startTime = this.$route.query.startTime
                }
                this.search(true);
            },
            validate() {
                let filters = this.filters;
                let tags = this.tags;
                filters.ids = null;
                filters.type = this.type;
                filters.tagId = this.tagId || string(() => tags.find((tag) => tag.id === filters.tagId).id) || null;
                filters.total = Math.max(int(filters.total), 0);
                filters.linage = Math.max(int(filters.linage), 1);
                filters.page = Math.max(Math.min(int(filters.page), Math.ceil(filters.total / filters.linage)), 1);
                session([this.env.key, this.$options.name, "filters", this.$route.fullPath], filters);
            },
            onTableHeaderClick() {
                this.select && this.$refs.table.toggleAllSelection();
            },
            onTableRowClick(row) {
                this.select && this.$refs.table.toggleRowSelection(row);
            },
            onTableLinageChange(value) {
                this.filters.linage = value;
                this.search(true);
            },
            onTablePageChange(value) {
                this.filters.page = value;
                this.search(true);
            },
            onTableSelectionChange(selects) {
                this.filters.ids = selects.map((data) => data.id);
                this.selects = selects;
            },
            chooseTag(action, tag) {
                if (this.loading) return;
                let filters = this.filters;
                if (!action || action === "start") {
                    this.$refs.tagPicker.init();
                    this.$nextTick(() => this.$refs.tagPickerList.init());
                } else if (action === "submit") {
                    let index = this.tags.findIndex((target) => target.id === tag.id);
                    if (index > -1) this.tags.splice(index, 1);
                    filters.tagId = tag.id;
                    this.tags.push({ id: tag.id, name: tag.name });
                    this.chooseTag("end");
                    this.search(true);
                } else if (action === "end") {
                    this.$refs.tagPicker.close();
                }
            },
            search(clean) {
                if (this.loading) return;
                if (clean) this.list = [];
                if (clean) this.selects = [];
                let filters = this.filters;
                this.validate();
                this.loading = true;
                this.plugins.user.getArticles({
                    ...filters,
                    isTop:filters.isTop === '1'?1:null
                }).then((res) => {
                    this.loading = false;
                    this.list = [];
                    this.selects = [];
                    this.$nextTick(() => this.$refs.table.doLayout());
                    if (res.code === 0) {
                        let data = res.data;
                        if (data.page > 1 && data.list.length === 0) {
                            filters.total = 0;
                            this.search();
                        } else {
                            filters.total = data.total;
                            this.list = data.list;
                            this.validate();
                        }
                    } else {
                        filters.total = 0;
                        this.validate();
                        this.plugins.modal.toast("列表加载失败<br>" + res.code + "：" + res.msg, "error");
                    }
                });
            },
            init() {
                this.loading = true;
                this.plugins.user.getArticleOfTags({ linage: 100, page: 1 }).then((res) => {
                    if (res.code === 0) this.tags = res.data.list.reduce((tags, tag) => {
                        let type = this.env.articleTypes.find((type) => type.value === this.type);
                        if (type && tag.tag.id === type.id) tags.push(tag);
                        return tags;
                    }, []);
                    else this.tags = [];
                }).then(() => {
                    this.loading = false;
                    this.reset();
                });
            },
        },
    };
</script>

<style lang="scss">
    .comp-articles {
        overflow: hidden;
    }
</style>
